<template>
  <div class="oil-price">
    <div class="oil-price-title">
      <el-select v-model="curArea"
                 class="area-select"
                 filterable
                 size="small"
                 placeholder="请选择查询城市"
                 @change="onSel">
        <template v-slot:prefix>
          <span>查询城市:</span>
        </template>
        <el-option
            v-for="item in Areas"
            :key="item.value"
            :label="item.name"
            :value="item.value"
        />
      </el-select>
      <el-button type="primary"
                 size="small"
                 @click="toQuery">查询
      </el-button>
    </div>
    <div v-if="weatherData && Object.keys(weatherData).length" style="margin-top: 10px">
      <el-descriptions title="" :column="1" border>
        <el-descriptions-item label="查询地区">{{ weatherData.address }}</el-descriptions-item>
        <el-descriptions-item label="地区编号">{{ weatherData.cityCode }}</el-descriptions-item>
        <el-descriptions-item label="天气状况">
          <el-tag size="small">{{ weatherData.weather }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="风向">{{ weatherData.windDirection }}风</el-descriptions-item>
        <el-descriptions-item label="风级">{{ weatherData.windPower }}</el-descriptions-item>
        <el-descriptions-item label="空气湿度">{{ weatherData.humidity }}</el-descriptions-item>
        <el-descriptions-item label="发布时间">{{ weatherData.reportTime }}</el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>


<script lang="ts">
import {ref} from 'vue'
import areas from './areas.json'
import {getWater} from "@/api";
import {ElMessage} from "element-plus";
import {limitedTime} from "@/utils/tools";

export default {
  name: 'weatherIndex',
  setup() {
    /* 数据源 */
    const curArea = ref<string>('合肥')
    let curAreaCache = localStorage.getItem(`MINITOOLBOX_weather_curAreaCache`) || ''
    const Areas = ref([
      ...areas
    ])
    const onSel = (sel: string) => {
      curArea.value = sel
    }
    const weatherData = ref<any>({})
    const toQuery = async () => {
      try {
        let res = null
        const storageData: string = localStorage.getItem(`MINITOOLBOX_weather_data`) || ''
        if(!limitedTime('weather', 1) && storageData && curArea.value === curAreaCache) {
          weatherData.value = JSON.parse(storageData)
          console.log('weather---读取了缓存')
          return
        }
        console.log('weather---重新请求了')
        curAreaCache = curArea.value // 缓存一下请求的值
        localStorage.setItem(`MINITOOLBOX_weather_curAreaCache`, curAreaCache)
        res = await getWater(curArea.value)
        const data: object | any = res?.data.data || {}
        weatherData.value = data || {}
        localStorage.setItem(`MINITOOLBOX_weather_data`, JSON.stringify(weatherData.value))
      } catch (e: any) {
        ElMessage.error(e)
      }
    }
    return {
      curArea,
      Areas,
      onSel,
      toQuery,
      weatherData
    }
  }
}
</script>

<style lang="scss">
.oil-price {
  margin: 0 auto;
  width: 90%;
  //height: 100%;
  .oil-price-title {
    display: flex;
    justify-content: space-between;
  }

  .area-select {
    margin-right: 10px;
  }

  .name-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}
</style>
